import classNames from 'classnames'
import { useMemo, useState } from 'react'
import { billTypeToName } from '@/constant/BillListData/index'
import './index.scss'
import Icon from '@/components/Icon'


const DailyBill = ({ date, value }) => {

    const [show, setShow] = useState(false)

    const { pay, income, total } = useMemo(() => {
        const pay = value.filter(item => item.type === 'pay').reduce((a, c) => a + c.money, 0)
        const income = value.filter(item => item.type === 'income').reduce((a, c) => a + c.money, 0)
        const total = pay + income
        return { pay, income, total }
    }, [value])

    return (
        <div className={classNames('dailyBill')}>
            <div className="header">
                <div className="dateIcon">
                    <span className="date">{date}</span>
                    <span className={classNames('arrow', { 'expand': show })} onClick={() => { setShow(!show) }}></span>
                </div>
                <div className="oneLineOverview">
                    <div className="pay">
                        <span className="type">支出</span>
                        <span className="money">{pay.toFixed(2)}</span>
                    </div>
                    <div className="income">
                        <span className="type">收入</span>
                        <span className="money">{income.toFixed(2)}</span>
                    </div>
                    <div className="balance">
                        <span className="money">{total.toFixed(2)}</span>
                        <span className="type">结余</span>
                    </div>
                </div>
            </div>
            <div className="billList" style={{ display: show ? 'block' : 'none' }}>
                {value.map(item => {
                    return (
                        <div className="bill" key={item.id}>
                            <Icon type={item.useFor} />
                            <div className="detail">
                                <div className="billType">{billTypeToName[item.useFor]}</div>
                            </div>
                            <div className={classNames('money', item.type)}>
                                {item.money.toFixed(2)}
                            </div>
                        </div>
                    )
                })}
            </div>
        </div>
    )
}

export default DailyBill